<template>
    <Layout :style="{ padding: '0 6px 6px',background: 'white'}">
        <Row :gutter="16">
            <Col span="6">
                <Card class="hiddenscroll" style="height: 80vh;overflow:auto;border-radius:15px;">
                    <p slot="title">
                        <Icon type="ios-film-outline"></Icon>
                        权限树
                    </p>
                    <Card class="hiddenscroll" style="height: 71vh;overflow:auto;border-radius:15px;">
                        <Tree ref="RoleTree" :data="AuthorizeTree" show-checkbox></Tree>
                    </Card>
                </Card>
                
            </Col>
            <Col span="18" >
                <Card class="hiddenscroll" style="height: 80vh;overflow:auto;border-radius:15px;">
                    <p slot="title">
                        <Icon type="ios-film-outline"></Icon>
                        角色信息
                    </p>
                    <Card class="hiddenscroll" style="height:35vh;overflow:auto;border-radius:15px;">
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            基本信息
                        </p>
                        <Row>
                            <Col span="22" offset="1">
                                <Form ref="Role" :model="Role" :rules="ruleValidate" label-position="top" :style="{marginTop: '15px'}">
                                    <Row>
                                        <Col span="10" offset="1">
                                            <FormItem label="角色编码">
                                                <Input v-model.trim="Role.NumCode" readonly placeholder="角色编码由系统自动生成" ></Input>
                                            </FormItem>
                                        </Col>
                                    </Row>

                                    <Row>
                                        <Col span="10" offset="1">
                                            <FormItem label="角色名称" prop="Name">
                                                <Input v-model.trim="Role.Name"  placeholder="角色名称" ></Input>
                                            </FormItem>
                                        </Col>
                                        <Col span="10" offset="2" >
                                            <FormItem label="创建时间">
                                                <DatePicker v-model.trim="Role.CreateTime" type="date" placeholder="请选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" readonly style="width:100%"></DatePicker>
                                            </FormItem>
                                        </Col>
                                    </Row>

                                    <Row>
                                        <Col span="10" offset="1">
                                            <FormItem label="启用标记">
                                                <div style="text-align:center">
                                                    <RadioGroup v-model.number="Role.IsUsed" >
                                                        <Radio :label="1" >启用</Radio>
                                                        <Radio :label="0" >禁用</Radio>
                                                    </RadioGroup>
                                                </div>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Form>
                            </Col>
                            <!-- <Col span="5" class="hiddenscroll" style="overflow:auto;height:75vh">
                                <Card class="hiddenscroll" style="overflow:auto;border-radius:15px;height:75vh">
                                    <p slot="title">
                                        <Icon type="ios-film-outline"></Icon>
                                        权限树
                                    </p>
                                    <Tree :data="data2" show-checkbox></Tree>
                                </Card>
                            </Col> -->
                        </Row>
                    </Card>
                    <Card class="hiddenscroll" style="height:34vh;overflow:auto;border-radius:15px;margin-top:16px">
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            权限明细
                        </p>
                        <Row>
                            <Col span="22" offset="1">

                            </Col>
                        </Row>
                    </Card>
                </Card>
            </Col>
        </Row>
        <Row>
            <Col span="20" offset="2" style="text-align:center;margin-top:48px">
                <Button type="primary" @click="Submit('Role')">提交</Button>
                <Button @click="Reset('Role')" style="margin-left: 108px">重置</Button>
            </Col>
        </Row>
    </Layout>
</template>

<script>
import { mapState } from "vuex";
import { CreateCode,GetOne,Create,Update,GetAllAuthorizes } from '@/axios/api/RolesAPI'

export default {
    computed:{
        ...mapState('roles',[
            'currentRoleID',
            'pageIndex',
            'pageSize',
        ])
    },
    components: {
        
    },
    mounted: function(){
        
        if(this.currentRoleID != ''){
            this.$Spin.show();
        }
        setTimeout(() => {
            this.$Spin.hide();
        }, 1000);
        
        if(this.currentRoleID != ''){
            
            GetOne(this.currentRoleID).then(res => {

                this.Role.Id = res.Id;
                this.Role.Num = res.Num;
                this.Role.NumCode = res.NumCode;
                this.Role.Name = res.Name;
                this.Role.IsUsed = res.IsUsed;
                this.Role.AuthorizeTree = res.AuthorizeTree;

                this.AuthorizeTree = JSON.parse(res.AuthorizeTree);
            });
        }
        else{
            CreateCode().then(res => {
                this.Role.NumCode = res.toString();
            })
            GetAllAuthorizes().then(authorizeres => {
                this.AuthorizeTree = authorizeres;
            })
        }
    },
    data () {
        return {
            Role:{
                Id: '00000000-0000-0000-0000-000000000000',
                Num: 0,
                NumCode: '',
                Name: '',
                IsUsed: 1,
                AuthorizeTree: '',
                CreateTime: new Date()
            },
            ruleValidate: {
                Name: [{ required: true, message: '角色名称为必填项！', trigger: 'blur'  }]
            },
            AuthorizeTree: []
        }
    },
    methods:{
        Submit (name){
            //this.$Message.success('按了OK键');
             this.$refs[name].validate((valid) => {

                if (valid) {
                    if(this.Role.Id == '00000000-0000-0000-0000-000000000000'){

                        this.$Message.success('校验通过!');

                        this.Role.AuthorizeTree = JSON.stringify(this.GetRoleTreeNodes()) ;

                        Create(this.Role).then(res => {

                            if(res > 0){

                                setTimeout(() => {

                                    this.$store.dispatch('roles/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                     this.$Notice.success({
                                        title: '操作提示',
                                        desc: '保存成功！ '
                                    });

                                }, 1000)
                               
                            }
                            else{

                                this.$Notice.error({
                                    title: '操作提示',
                                    desc: '保存失败！ '
                                });

                            }
                        }).catch(err =>{

                            this.$Notice.error({
                                title: '操作提示',
                                desc: '保存失败：' + err + '!'
                            });

                        })
                        
                    }
                    else{

                        this.$Message.success('校验通过!');

                        this.Role.AuthorizeTree = JSON.stringify(this.GetRoleTreeNodes()) ;

                        Update(this.Role).then(res => {
                            if(res > 0){
                                setTimeout(() => {
                                    this.$store.dispatch('roles/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                     this.$Notice.success({
                                        title: '操作提示',
                                        desc: '更新成功！'
                                    });
                                }, 1000)
                            }
                            else{
                                this.$Notice.success({
                                    title: '操作提示',
                                    desc: '更新失败！'
                                });
                            }
                        }).catch(err =>{
                            this.$Notice.error({
                                title: '操作提示',
                                desc: '更新失败：' + err.data + '!'
                            });
                        })
                    }
                    this.ChangeModal();
                } else {
                    this.$Message.error('校验失败!');
                    //this.ChangeModal('Role');
                }
            })
            
        },
        Reset (name){
            this.$refs[name].resetFields();
        },
        GetRoleTreeNodes(){

            var SelectNodes = this.$refs.RoleTree.getCheckedAndIndeterminateNodes();
            
            SelectNodes = SelectNodes.filter(item => item.children);

            var EmptyNodes = this.AuthorizeTree.filter(item => item.children);

            SelectNodes.forEach(item => {
                EmptyNodes.splice(SelectNodes.indexOf(i => i.id=item.id),1)
            });

            var result = SelectNodes.concat(EmptyNodes);

            return result;
        },
        ChangeModal (){
            //this.$refs[name].resetFields();
            this.$store.commit('roles/CHANGE_MODAL');
            this.$router.push('/system/roles')
        },
    }
}
</script>

<style scoped>
    .hiddenscroll::-webkit-scrollbar { width: 0 !important }
    .hiddenscroll { -ms-overflow-style: none; }
    .hiddenscroll { overflow: -moz-scrollbars-none; }
</style>